<template>
	<div>
		<!-- 导航部分开始 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>日志管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 导航部分结束 -->
		<!--  搜索栏开始 -->
		<el-form style="margin-top: 15px;" :inline="true" :model="queryDcit" class="demo-form-inline">
			<el-form-item label="功能模块">
				<el-input v-model="queryDcit.optionModule" placeholder="请输入功能模块" clearable />
			</el-form-item>
			<el-form-item label="用户编号">
				<el-input v-model="queryDcit.userId" placeholder="请输入用户编号" clearable />
			</el-form-item>
			<el-form-item label="操作类型">
				<el-input v-model="queryDcit.optionType" placeholder="操作类型" clearable />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="loadDicts">搜索</el-button>
			</el-form-item>
		</el-form>
		<!--  搜索栏结束 -->
		<!-- 工具栏开始 -->
		<div class="flex">
			<el-button @click="handlerEditDicts" title="编辑选中字典" type="primary"><el-icon>
					<EditPen />
				</el-icon></el-button>
			<el-button @click="handlerDeleteDicts" title="删除选中字典" type="primary"><el-icon>
					<Delete />
				</el-icon></el-button>
		</div>
		<!-- 工具栏结束 -->
		<!-- 表格 开始 -->
		<el-table ref="dictTable" :data="dicts" max-height="800px" stripe="true" border="true"
			style="width: 90%;margin-top: 10px;">
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column align="center" label="日志编号" property="logId" />
			<el-table-column align="center" label="用户编号" property="userId" />
			<el-table-column align="center" label="操作时间" :formatter="timeFormatter" property="optionTimeMillis" />
			<el-table-column align="center" label="功能模块" property="optionModule" />
			<el-table-column align="center" label="操作类型" property="optionType" />
			<el-table-column align="center" label="请求方式" property="requestMethod" />
			<el-table-column align="center" label="请求接口" property="requestPath" />
			<el-table-column align="center" label="客户端IP地址" property="requestAddress" />
			<el-table-column width="100" align="center" label="操作">
				<template #default="scope">
					<div class="image">
						<el-icon>
							<View />
						</el-icon>
						<el-link type="primary" @click="showlog(scope.row)">
							<span style="size: 5px;">详细</span>
						</el-link>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<!-- 表格 结束 -->
		
		<!-- 查看日志的弹窗开始-->
		<el-dialog v-model="logViewDialogVisible" title="操作日志详细" width="30%" align-center>
		    <!-- 添加用户的表单 -->
		    <el-form label-width="100px" :model="newItem" style="max-width: 460px">
		        <el-form-item  label="功能模块" style="width: 300px;">
		            <el-input readonly="true" v-model="newItem.optionModule"  />            
		        </el-form-item>
		        <el-form-item label="操作类型">
		            <el-input readonly="true" v-model="newItem.optionType" />
		        </el-form-item>
		        <el-form-item label="请求方式">
		            <el-input readonly="true" v-model="newItem.requestMethod" />
		        </el-form-item>
		        <el-form-item label="请求接口	">
		            <el-input readonly="true" v-model="newItem.requestPath" />
		        </el-form-item>
		        <el-form-item label="操作时间">
		            <el-input readonly="true" :formatter="timeFormatter" v-model="newItem.optionTimeMillis" />
		        </el-form-item>
		    </el-form>
		</el-dialog>
		<!-- 查看日志的弹窗结束-->
		<!-- 分页栏开始 -->
		<el-pagination style="margin-top: 15px;" :page-size="dictLimit" :pager-count="dictMaxPage"
			@current-change="changePage" background layout="prev, pager, next" :total="dictTotal" />
		<!-- 分页栏结束 -->
	</div>
</template>
<script>
	import logRequest from '../../../api/log-api.js';
	import tools from '../../../util/tools.js';
	export default {
		data() {
			return {
				queryDcit: {}, // 分装查询字典条件的字典对象
				dicts: [], // 字典数据列表
				dictCurrPage: 1, // 字典分页的当前页码
				dictLimit: 10, // 字典分页的每页大小
				dictTotal: 0, // 字典列表的总条数
				dictMaxPage: 1, // 字典列表的最大页码  
				
				logViewDialogVisible: false,	//查看日志弹窗标识
				newItem: {},
				
			}
		},
		methods: {
			/**
			 * 显示日志弹窗
			 * @param {Object} row
			 */
			showlog(row){
				this.logViewDialogVisible = true;
				this.newItem = row;
			},

			/**
			 * 时间毫秒数转换为对应的字符串
			 * @param {*} time 
			 */
			timeFormatter(row, column, time) {
				return tools.timeMillisToString(time);
			},
			/**
			 * 字典列表的翻页函数
			 * @param {} value  最新页码
			 */
			changePage(value) {
				this.dictCurrPage = value;
				this.loadDicts();
			},
			/**
			 * 加载字典数据
			 */
			loadDicts() {
				logRequest.list(this.dictCurrPage, this.dictLimit, this.queryDcit, res => {
					// 设置数据
					this.dicts = res.data.list;
					this.dictTotal = res.data.total;
					this.dictMaxPage = res.data.pages;
				});
			}
		},
		mounted() {
			// 默认加载字典数据列表
			this.loadDicts();
		}
	}
</script>

<style scoped>
.image{
		display: flex;
		align-items: center;
		cursor: pointer;
	}
</style>